<script>
import request from '@/libs/request';

export default {
  name: 'addtopic',
  props: {
  },
  data() {
    return {
      total: 0,
      multiselection: [],
      queryData: {
        page: 1,
        title: '',
        type_id: [],
        type: 1,
        selected_type_ids: [],
        resource_type: 2,
        size: 10,
      },
      options: [],
      topic_ids: [],
      isTableLoading: false,
      modal: false,
      tableData: [],
      ruleForm: {},
    };
  },
  methods: {
    showModal(type) {
      this.modal = true;
      this.queryData.type = type
      this.getInfo()
      this.search();
    },
    search(d) {
      if (typeof d == 'number') {
        this.queryData.page = d;
      } else {
        this.queryData.page = 1;
      }
      this.getList();
    },
    sizeSearch(d) {
      this.queryData.size = d;
      this.search();
    },
    reset() {
      this.queryData.title = '';
      this.queryData.type_id = [];
      this.queryData.resource_type = 2;
      this.queryData.selected_type_ids = [];
      this.multiselection = [];
      this.search();
    },
    getInfo() {
      request({
        url: '/test/info',
        method: 'post',
      }).then(res => {
        this.options = res.data.train_types
      })
    },
    getList() {
      this.isTableLoading = true;
      let loading = this.$loading();
      this.queryData.topic_ids = this.topic_ids;
      request({
        url: '/question/list',
        method: 'post',
        data: {
          ...this.queryData,
          exclude_ids: this.topic_ids,
        },
      })
        .then((res) => {
          loading.close();
          this.tableData = res.data.list;
          this.total = res.data.total;
          this.isTableLoading = false;
        })
        .catch((err) => {
          loading.close();
          this.isTableLoading = false;
        });
    },
    back() {
      this.modal = false;
    },
    handleSelectionChange(val) {
      this.multiselection = val;
    },
    handleChange(value) {
      this.queryData.type_id = []
      if (value) {
        for (let item of value) {
          this.queryData.type_id.push(...item)
        }
      }
      this.queryData.type_id = Array.from(new Set(this.queryData.type_id))
    },
    submitForm() {
      let selected = [];
      this.multiselection.map((item) => {
        selected.push(item.id);
      });
      this.topic_ids.map((item) => {
        selected.push(item);
      });
      selected = Array.from(new Set(selected));
      this.$emit('set-type-ids', selected);
      this.modal = false;
      this.reset();
    },
  },
  mounted() {
    this.reset();
  },
};
</script>

<template>
  <el-dialog title="添加习题" :modal="false" :visible.sync="modal" width="60%" custom-class="custom-dialog-test-select-topic-style"
    style="">
    <div class="head" style="z-index: 3000 !important">
      <div class="input">
        <span>题目名称：</span>
        <el-input v-model="queryData.title" placeholder="请输入" />
      </div>
      <div class="input">
        <span>培训类型：</span>
        <el-cascader
          :show-all-levels="false"
          :options="options"
          v-model="queryData.selected_type_ids"
          :props="{ multiple: true, checkStrictly: true }"
          clearable
          @change="handleChange"
        ></el-cascader>
      </div>
      <el-button type="primary" class="btn" @click="search">查询</el-button>
      <el-button type="primary" class="btn" @click="reset">重置</el-button>
    </div>
    <el-table
      :data="tableData"
      border
      v-loading="isTableLoading"
      empty-text="暂无数据"
      no-filtered-userFrom-text="暂无筛选结果"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column fixed type="selection" align="center" label="序号" width="50" />
      <el-table-column fixed prop="title" align="center" show-overflow-tooltip label="题目内容" min-width="120" />
      <el-table-column prop="type" align="center" label="题目类型" width="140">
        <template slot-scope="scope">
          <p v-if="scope.row.type == 1">单选</p>
          <p v-else-if="scope.row.type == 2">多选</p>
          <p v-else>判断</p>
        </template>
      </el-table-column>
      <el-table-column
        prop="options"
        align="center"
        show-overflow-tooltip
        label="题目选项"
        min-width="200"
      ></el-table-column>
      <el-table-column prop="answer" align="center" label="题目答案" width="140"></el-table-column>
      <el-table-column prop="type_name" align="center" label="培训类型" width="140"> </el-table-column>
    </el-table>
    <div class="acea-row row-right page" style="margin-bottom: 80px;">
      <el-pagination
        style="margin-top: 5px"
        @size-change="sizeSearch"
        @current-change="search"
        :current-page.sync="queryData.page"
        :page-size.sync="queryData.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
    </el-pagination>
    </div>
    <div class="footer">
      <el-button @click="back">关闭</el-button>
      <el-button type="primary" size="medium" @click="submitForm">确认</el-button>
    </div>
  </el-dialog>
</template>

<style scoped lang="stylus">
.head {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background: #ffffff;
  border-radius: 5px;
}

.input {
  display: flex;
  align-items: center;
  margin-right: 15px;
  margin-bottom: 20px;
}

.input > span {
  font-size: 12px;
  flex-shrink: 0;
}

.btn {
  margin-bottom: 20px;
}

.footer {
  width: 100%;
  height: 60px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e6e6e6;
}
</style>
<style>
.custom-dialog-test-select-topic-style>.el-dialog__body {
  height: 60vh;
}
</style>